<template>
    <div>
        <!-- 电影展示组件 start -->
        <!-- <div class="film-item" v-for="(film, index) in list" :key="index" @click=" $root.$emit('changePage','detail-box') "> -->
        <!-- get方式传递参数 -->
        <!-- <router-link class="film-item" v-for="(film, index) in list" :key="index" :to="'/detail?filmId='+film.filmId" tag="div"> -->
        <!-- rest方式传递参数 -->
        <!-- <router-link class="film-item" v-for="(film, index) in list" :key="index"
         :to="'/detail/'+film.filmId+'/123'" tag="div"> -->
         <!-- rest方式传递参数其他写法 -->
         <router-link class="film-item" v-for="(film, index) in list" :key="index"
         :to="{
             //只能用name
             name:'details',
             params:{
                 //如果参数不与路由定义的相对应，在切换时会导致#后的url清空
                 filmId:film.filmId
             }
         }" tag="div">
            <div class="film-img" :style="`background-image: url(${film.filmImg})`"></div>
            <div class="film-title">{{film.filmName}}</div>
            <div class="film-source" v-if="film.source">
                <span class="star-img" v-for="c in 5" :class=" Math.ceil(film.source)>=c?'open':'close' " :key="c"></span>
                <span class="star-source">{{ film.source*1 | addZero(1) }}</span>
            </div>
            <div class="film-source" v-if="!film.source">
                <span class="star-tip">暂无评分</span>
            </div>
        </router-link>
        <!-- 电影展示组件 end -->
    </div>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            default() {
                return [];
            }
        }
    }
};
</script>

<style lang="less" scoped>
.film-item {
    width: 2.35rem;
    height: 4.55rem;
    display: inline-block;
    margin-left: 0.1rem;
    vertical-align: top;
    > .film-img {
        height: 3.6rem;
        background-color: @gray-light;
        background-repeat: no-repeat;
        background-size: cover;
    }
    > .film-title {
        font-size: 0.26rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0.1rem;
    }
}
</style>